<template>
  <div class="page">
       <!-- tool -->
       <div class="head clearfix">
           <div class="left fl">
           <img :src='require("../../assets/img/tou_02.jpg")' class="fl">
           <div class="fl">
           <h2>YCcc</h2>
           <a href="#">完善资料让小u更懂你</a>
        </div>
        </div>
        <div class="right fr">
            <img :src='require("../../assets/img/red_envelopes.png")' alt="pic">
            <a href="#">每日签到</a>
        </div>
       </div>

       <div class="nav">
        <ul class="top">
            <li><a href="#">12</a></li>
            <li><a href="#">12</a></li>
            <li><a href="#">&yen;0</a></li>
            <li><a href="#">12</a></li>
        </ul>
        <ul class="bottom">
            <li><a href="#">我的收藏</a></li>
            <li><a href="#">浏览记录</a></li>
            <li><a href="#">我的红包</a></li>
            <li><a href="#">优惠券</a></li>
        </ul>
        
        <div class="cen">
            <div class="top">
                <h3>我的订单</h3>
                <a href="qrdingdan.html">全部订单<em class="iconfont">&#xe63c;
                </em></a>
            </div>
            <div class="bott">
                <a href="#">
                    <img :src='require("../../assets/img/payment.png")' alt="pic">
                    <p>待付款</p>
                </a>
                <a href="#">
                    <img :src='require("../../assets/img/delivery.png")' alt="pic">
                    <p>待收货</p>
                </a>
                <a href="#">
                    <img :src='require("../../assets/img/evaluation.png")' alt="pic">
                    <p>评价</p>
                </a>
                <a href="#">
                    <img :src='require("../../assets/img/service.png")' alt="pic">
                    <p>售后/退款</p>
                </a>
            </div>
            
        </div>
       </div>

       <div class="main">
           <div class="div1">
               <div class="z clearfix">
               <em class="iconfont fl">&#xe627;
            </em>
               <p class="fl">地址管理</p>
            </div>
               <em class="iconfont">&#xe601;
            </em>
           </div>
           <div class="div1">
               <div class="z clearfix">
               <em class="iconfont icon-shangdian
 fl">
            </em>
               <p class="fl">我的钱包</p>
            </div>
               <em class="iconfont">剩余99999999999999U币&#xe601;
            </em>
           </div>
           <div class="div1">
               <div class="z clearfix">
               <em class="iconfont icon-zujian-icon-18 fl">
            </em>
               <p class="fl">我的二维码</p>
            </div>
               <em class="iconfont">&#xe601;
            </em>
           </div>
           <div class="div1">
               <div class="z clearfix">
               <em class="iconfont icon-wode fl">
            </em>
               <p class="fl">我的小伙伴</p>
            </div>
               <em class="iconfont ">&#xe601;
            </em>
           </div>
           <div class="div1">
               <div class="z clearfix">
               <em class="iconfont fl">&#xe627;
            </em>
               <p class="fl">0元使用</p>
            </div>
               <em class="iconfont">&#xe601;
            </em>
           </div>
       </div>
  </div>
</template>

<script>
export default {

}
</script>

<style scoped>
.page {
  max-width: 750px;
  min-width: 320px;
  margin: 0 auto;
}
.tool {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 0.89rem;
  padding: 00.89rem 0.12rem 0 .34rem;
  background: #ff6040;
}
.tool .back {
  font-size: 0.35rem;
  color: #ffdfd8;
}
.tool p {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font: 0.4rem "微软雅黑";
  color: #ffdfd8;
}
.tool .menu {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 1.72rem;
  height: .63rem;
  border: 1px solid #ff866c;
  border-radius: .3rem;
}
.tool .menu .line {
  height: 0.37rem;
  width: 1px;
  background: #ff896e;
}
.tool .menu em {
  font-size: 00.35rem;
  color: #ffdfd8;
}
.jiao {
  position: fixed;
  width: 100%;
  left: 0;
  bottom: 0;
  height: 1.17rem;
  border-top: 1px solid #cccccc;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.jiao a {
  display: block;
  text-align: center;
}
.jiao a:first-child p {
  color: #ff6040;
}
.jiao a img {
  height: .4rem;
  width: auto;
}
.jiao p {
  font: 0.2rem/0.49rem "微软雅黑";
  color: #9b9b9b;
}
.header {
  background-image: linear-gradient(180deg, #ff6040, #ff7b68);
}
form {
  position: relative;
}
form input {
  width: 3.36rem;
  height: 0.6rem;
  border: .02rem solid #e6e6e6;
  background: #ffffff;
  text-indent: 0.67rem;
  border-radius: 0.05rem;
  font: 0.27rem/0.6rem "微软雅黑";
  color: #999999;
}
form .ss {
  position: absolute;
  left: .14rem;
  top: .15rem;
  color: #9a9a9a;
}
.page {
  background-color: #f2f2f2;
}
.head {
  background-color: #ff684c;
}
.head .left img {
  width: 1.67rem;
}
.head .left .fl h2 {
  font: bold 0.35rem "微软雅黑";
  color: white;
  margin-top: .4rem;
  margin-bottom: .21rem;
}
.head .left .fl a {
  font: 0.2rem "微软雅黑";
  color: white;
  border: .02rem solid #ffb3a6;
  border-radius: .05rem;
}
.head .right {
  width: 1.53rem ;
  height: .38rem;
  background-color: #ffd5cc;
  border-radius: .16rem 0 0 .16rem;
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-top: .63rem;
  border: 1px solid white;
}
.head .right img {
  height: .28rem;
}
.head .right a {
  font: 0.2rem "微软雅黑";
  color: #ff6a4e;
}
.nav {
  position: relative;
  height: 2.52rem;
  background-image: linear-gradient(180deg, #ff715a, #ff8a7f);
  box-shadow: 0 0.1rem 0.1rem #ffdbd3;
}
.nav ul {
  display: flex;
  justify-content: space-around;
}
.nav ul li a {
  font: .36rem Arial;
  color: white;
}
.nav .bottom li a {
  font: 0.19rem "微软雅黑";
}
.nav .cen {
  position: absolute;
  left: .2rem;
  top: .98rem;
  width: 7rem;
  height: 2.06rem;
  border-radius: .04rem;
  background-color: white;
}
.nav .cen .top {
  display: flex;
  justify-content: space-between;
}
.nav .cen .top h3 {
  font: bold 0.3rem "微软雅黑";
  color: black;
  margin-left: .21rem;
  padding-top: .23rem;
}
.nav .cen .top a {
  font: 0.24rem "微软雅黑";
  color: #ff6546;
  margin-right: .19rem;
  padding-top: .23rem;
}
.nav .cen .bott {
  margin-top: .39rem;
  display: flex;
  justify-content: space-around;
}
.nav .cen .bott a {
  text-align: center;
}
.nav .cen .bott a p {
  font: 0.17rem "微软雅黑";
  color: #333333;
}
.main {
  margin-top: .72rem;
  height: 5.7rem;
  background-color: white;
  padding-top: .2rem;
}
.main .div1 {
  display: flex;
  justify-content: space-between;
}
.main .div1 .z {
  margin-left: .2rem;
}
.main .div1 .z em {
  line-height: .72rem;
  color: red;
}
.main .div1 .z p {
  font: bold 0.23rem/0.72rem "微软雅黑";
}
.main .div1 em {
  line-height: .72rem;
  font-size: .2rem;
  color: #666666;
  margin-right: .2rem;
}
</style>